// 继承写法
class Calculate {
  plus(a, b) {
    return a + b;
  }
  minus(a, b) {
    return a - b;
  }
  mul(a, b) {
    return a * b;
  }
  div(a, b) {
    return a / b;
  }
}

// 装饰器
// const CalcuLata = (target) => {
//   target.prototype.plus = function (a, b) {
//     return a + b;
//   };
//   target.prototype.minus = function (a, b) {
//     return a - b;
//   };
//   target.prototype.mul = function (a, b) {
//     return a * b;
//   };
//   target.prototype.div = function (a, b) {
//     return a / b;
//   };
// };
// @CalcuLata
class Compute extends Calculate {
  constructor(id) {
    super();
    this.oBox = document.getElementById(id);
    this.oResult = this.oBox.getElementsByClassName("result")[0];
    this.oInputs = this.oBox.getElementsByTagName("input");
    this.oBtnGroup = this.oBox.getElementsByClassName("btn-group")[0];
    this.init();
  }
  init() {
    this.oBtnGroup.addEventListener("click", this.onBtnClick.bind(this));
  }
  onBtnClick(ev) {
    const e = ev || window.event,
      tar = e.target || e.srcElement,
      tarName = tar.tagName.toLowerCase();
    if (tarName === "button") {
      const val1 = Number(this.oInputs[0].value);
      const val2 = Number(this.oInputs[1].value);
      const method = tar.getAttribute("data-field");
      this.resultRender(this[method](val1, val2));
    }
  }
  resultRender(result) {
    this.oResult.innerHTML = result;
  }
}
new Compute("compute");
new Compute("compute2");

